<template>
	<view style="padding: 10rpx;" class="Box">
		<view class="TextBox">
			<view class="title">
				<text>
					{{this.noteTitle}}
				</text>
			</view>
		
			<view class="userName">
				<text @click="goProfile(this.noteDetail.user_id)">
					{{this.noteDetail.name}}
				</text>
			</view>
		
			<view v-if="noteDetail.type === 1 || noteDetail.type === 3">
				<rich-text class="ql-editor":nodes="noteContent" > </rich-text>
			</view>
			
			<view v-if="noteDetail.type === 2" class="container-wrapper">
				<view v-if="!showDividingLine" class="backBox">
					<view style="margin-right: auto;"><text style="font-size: 45rpx;">{{this.SWOT[this.current]}}</text></view>
					<view><button class="viewBack" style="margin-bottom: 2%; right: 0%;" @click="closeView">返回</button></view>
				</view>
				
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[1], 'inactive' : !isActive[1]&&(isActive[2]||isActive[3]||isActive[4])}"
							:nodes="noteContentArr[0]"></rich-text>
							
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[2], 'inactive' : !isActive[2]&&(isActive[1]||isActive[3]||isActive[4])}"
							:nodes="noteContentArr[1]"> </rich-text>
							
				<view v-if="showDividingLine">
					<view><text style="position: absolute; top: 16%; left: 46%;"> 内部</text></view>
					<view><text style="position: absolute; top: 47%; left: 46%;"> 外部</text></view>
					<view><text style="position: absolute; top: 31.5%; left: 15%;"> 有益</text></view>
					<view><text style="position: absolute; top: 31.5%; left: 77%;"> 有害</text></view>
					<view><text style="position: absolute; top: 23%; left: 36%; font-size: 100rpx; color: blue;" 
							@click="onShowReady(1)"> S</text></view>
					<view><text style="position: absolute; top: 23%; left: 55%; font-size: 100rpx; color: orange;"  
							@click="onShowReady(2)"> W</text></view>
					<view><text style="position: absolute; top: 35%; left: 36%; font-size: 100rpx; color: green;" 
							@click="onShowReady(3)"> O</text></view>
					<view><text style="position: absolute; top: 35%; left: 57%; font-size: 100rpx; color: Red;" 
							@click="onShowReady(4)"> T</text></view>
					<view class="vertical-line"></view>
					<view class="horizontal-line"></view>
				</view>
				
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[3], 'inactive' : !isActive[3]&&(isActive[1]||isActive[2]||isActive[4])}"
							:nodes="noteContentArr[2]"> </rich-text>
							
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[4], 'inactive' : !isActive[4]&&(isActive[1]||isActive[2]||isActive[3])}"
							:nodes="noteContentArr[3]"> </rich-text>
			</view>
			
			<view v-if="noteDetail.type === 4" class="container-wrapper">
				<view v-if="!showDividingLine" class="backBox">
					<view style="margin-right: auto;"><text style="font-size: 45rpx;">{{this.timeManageFour[this.current]}}</text></view>
					<view><button class="viewBack" style="margin-bottom: 2%; right: 0%;" @click="closeView">返回</button></view>
				</view>
				
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[1], 'inactive' : !isActive[1]&&(isActive[2]||isActive[3]||isActive[4])}"
							:nodes="noteContentArr[0]"></rich-text>
							
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[2], 'inactive' : !isActive[2]&&(isActive[1]||isActive[3]||isActive[4])}"
							:nodes="noteContentArr[1]"> </rich-text>
							
				<view v-if="showDividingLine">
					<view><text style="position: absolute; top: 16%; left: 46%;"> 紧急</text></view>
					<view><text style="position: absolute; top: 47%; left: 45%;"> 不紧急</text></view>
					<view><text style="position: absolute; top: 31.5%; left: 15%;"> 重要</text></view>
					<view><text style="position: absolute; top: 31.5%; left: 77%;"> 不重要</text></view>
					<view><text style="position: absolute; top: 23%; left: 36%; font-size: 100rpx; color: blue;" 
							@click="onShowReady(1)"> 1</text></view>
					<view><text style="position: absolute; top: 23%; left: 55%; font-size: 100rpx; color: orange;"  
							@click="onShowReady(2)"> 2</text></view>
					<view><text style="position: absolute; top: 35%; left: 36%; font-size: 100rpx; color: green;" 
							@click="onShowReady(3)"> 3</text></view>
					<view><text style="position: absolute; top: 35%; left: 55%; font-size: 100rpx; color: Red;" 
							@click="onShowReady(4)"> 4</text></view>
					<view class="vertical-line"></view>
					<view class="horizontal-line"></view>
				</view>
				
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[3], 'inactive' : !isActive[3]&&(isActive[1]||isActive[2]||isActive[4])}"
							:nodes="noteContentArr[2]"> </rich-text>
							
				<rich-text 	class="ql-container" 
							:class="{'active' : isActive[4], 'inactive' : !isActive[4]&&(isActive[1]||isActive[2]||isActive[3])}"
							:nodes="noteContentArr[3]"> </rich-text>
			</view>
			
			<view class="tagbox">
				<view v-for="(tag, index) in tags" :key="index"
					class="tag-item" @click="onTagClick(tag)">
					{{ tag }}
				</view>
			</view>
			
			<view style="display: flex; width: 100%;">
				<view style="margin-right: auto;">
					<text style="color: blue;" @click="goHistoryView(this.noteId)">
						\n查看历史版本
					</text>
				</view>
				
				<view>
					<text style="color: blue;" @click="AIAssistAsk()">
						\n生成摘要
					</text>
				</view>	
			</view>

					
			<view style="margin-top: 4%;">
				<text>
					{{this.genSummary}}
				</text>
			</view>
		</view>
		
	
		
		<view class="operateBox">
			<view class="operate-item">
			    <image 	v-if="!isLikeNote" style="width: 50px ; height: 48px;"
						src="/static/tab-Icons/like.png"
						@click="likeNote">
				</image>
				
				<image  v-if="isLikeNote" style="width: 50px ; height: 48px;"
						src="/static/tab-Icons/notelikeSelected.png"
						@click="likeNote">
				</image>
				
			    <text class="funcLabel">{{ noteDetail.like_num }}</text>
			</view>
			
			<view class="operate-item" style="">
				<image 	style="width: 35px ; height: 35px; margin-top: 6px"
						src="/static/tab-Icons/edit.png"
						@click="goEditNote(noteId, fileName)">
				</image>
				
			    <text class="funcLabel" style="margin-top: 12px;">编辑</text>
			</view>
			
			<view class="operate-item">
			    <image 	style="width: 35px ; height: 35px; margin-top: 10px;"
			    		src="/static/tab-Icons/collect.png"
						@click="addToDirectoryEntry">
			    </image>
				
			    <text class="funcLabel" style="margin-top: 10px">+收藏夹</text>
			</view>
		</view>
		
		
		
		<view class="commentBox":class="{'active' : isShowComment}">
			<view class="control">
				<text style="margin-left: 4%; margin-right: auto;font-size: 16px;">评论</text>
				<text v-if="!isShowComment" style="margin-right: 3%; color: grey; font-size: 16px;" @tap="unfoldComment">展开</text>
				<text v-if="isShowComment" style="margin-right: 3%; color: grey; font-size: 16px;" @tap="unfoldComment">收起</text>
			</view>
			
			<view class="comment" v-for="(item, index) in comment" :key="index">
				<image @click="goProfile(item.user_id)" class="head-image" :src="item.avatar"> </image>
				<view class="column">
					<view class="commentUserName">{{ item.name }}</view>
					<view class="commentContent">{{ item.text }}</view>
				</view>
				<view class="likeBox">	
					<view 	@click="like(index)"
							class="likeImg":class="{'likeActive' : isLike.includes(index)}">
					</view>
							
					<text class="likeNumText">
						{{ item.like_num }}
					</text>
				</view>
			</view>
			
			<view class="writeCommentBox" v-if="!commentInput" @click="writeComment">写评论</view>
				<view v-else class="writeCommentBox">
					<input v-model="commentInputValue" focus=true 
						   @blur="blurComment" @confirm="onComment(this.user.name,commentInputValue,this.user.id)"/>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				nodes:'',
				user:[],
				noteTitle:'TestTitle测试标题',
				noteContent:'<p>该笔记已被删除</p>',
				noteContentArr:[
					"",
					"",
					"",
					""
				],
				comment:[
					
				],
				noteDetail:[
					
				],
				tags:['一个','两个'],
				noteId: 0,
				noteName: '',
				isShowComment: false,
				isLikeNote: false, //笔记的点赞图标切换
				
				commentInput: false,
				commentInputValue: '',
				fileName:'',
				isLike: [
					
				],
				isFriend: false,		
				directory: [
									
				],
				directoryPage: 0,
				
				current: 0,
				SWOT:['强项：','弱项：','机遇：','威胁：'],
				timeManageFour:['紧急且重要：','紧急但不重要：','不紧急但重要：','不紧急且不重要：'],
				
				
				isActive : [false, false, false, false, false],
				showDividingLine : true,
				
				ischeckfriend: false,
				genSummary:'',
				
				tokenai:''
			};
		},
		
		onLoad(option){
			this.user = uni.getStorageSync('xm-user');
			console.log(this.user);
			this.noteId = option.noteId;
			this.fileName = option.FileName;
			this.fileName = this.fileName.substring(0,16);
			console.log(this.fileName);
			
			let that = this;
			this.getTokenAI();
			uni.downloadFile({
				url: config.baseUrl + '/note/download?FileName=' + option.FileName,
				success(res){
					console.log(res);
					that.noteName = res.tempFilePath;
					uni.getFileSystemManager().readFile({
						filePath : res.tempFilePath,
						encoding : 'utf-8',
						position : 0,
						
						success: function(res){
							console.log(res);
							let tmp = res.data;
							let arr = tmp.split("#<<<<<!*&*!>>>>>#");
							that.noteTitle = arr[0];
							if(arr[arr.length - 1] === '1' || arr[arr.length - 1] === '3'){
								that.noteContent = arr[1];
							}
							else if(arr[arr.length - 1] === '2' || arr[arr.length - 1] === '4'){
								that.noteContentArr = arr.slice(1,5);
							}
						},
						fail(res){
							console.error(res);
						}
					})
				}
			})
			
			uni.request({
				url : config.baseUrl + "/comment/selectById/" + this.noteId,
				method: 'GET',
				success(res) {
					
					that.comment = res.data;
					console.log("这是res.data")
					console.log(res.data)
					console.log(that.comment);
				}	
			})
			
			uni.request({
				url : config.baseUrl + "/note/getDetail?noteId=" + this.noteId,
				method: 'GET',
				success(res) {
					
					that.noteDetail = res.data;
					that.tags = that.noteDetail.note_tags.split(",");
					that.tags.pop();
					console.log(that.noteDetail);
				}	
			})
			console.log("user!!"+JSON.stringify(that.user))
			
			uni.request({
				url: config.baseUrl + '/directoryitem/getDirectoryitemByUserId?userId=' + that.user.id,
				method: 'GET',
				success(res) {		
					console.log(res);
					that.directory = res.data;
					console.log(that.directory)
				}	
			})
		},
		
		methods: {
			onShowReady(index) {
				this.isActive[index] = true;
				this.current = index-1;
				this.showDividingLine = false;
			},
			
			closeView(){
				this.isActive[1] = false;
				this.isActive[2] = false;
				this.isActive[3] = false;
				this.isActive[4] = false;
				
				this.showDividingLine = true;
			},
			
			
			unfoldComment(){
				this.isShowComment = !this.isShowComment;
			},
			
			writeComment(){
				this.commentInput = true;
			},
			
			onComment(username,query,id){
				if (query !== '') {
					this.saveCommnet(username,query);
				
					let form = {
						user_id : id,
						text : query,
						note_id : this.noteId
					}
					uni.request({
						url: config.baseUrl + "/comment/insert",
						data: form,
						method: 'POST',
						success(res){
							console.log(res);
						}
					})
				}
			},
			
			saveCommnet(user_name,query){
				this.commentInput = false; 
				if(this.commentInputValue !== ''){
					let newComment = {name:user_name , text:query, avatar: this.user.avatar, user_id: this.user.id};
					this.comment.push(newComment);
				}
				this.commentInputValue = '';
			},
			
			blurComment(){
				this.commentInput = false;
				this.commentInputValue = '';
			},
			
			//笔记点赞
			likeNote(){
				let that = this;
				if(this.isLikeNote === false){
					//点赞
					this.isLikeNote = true;
					// 实现数据库处理
					uni.request({
						url: config.baseUrl + '/note/upvote?noteId=' + this.noteId,
						method: 'POST',
						success(res){
							console.log(res);
							that.noteDetail.like_num += 1;
						},
						fail(res){
							console.log(res);
						}
					})
				} else {
					//取消点赞
					this.isLikeNote = false;
					uni.request({
						url: config.baseUrl + '/note/cancelUpvote?noteId=' + this.noteId,
						method: 'POST',
						success(res){
							console.log(res);
							that.noteDetail.like_num -= 1;
						}
					})
				}
			},
			
		    checkIsFriend(){
				let that = this;
				uni.request({
					url: config.baseUrl + "/friendchart/checkout?selfId=" + this.user.id + "&friendId=" + this.noteDetail.user_id,
					method: 'GET',
					success(res) {
						that.ischeckfriend = true;
						console.log(res);
						that.isFriend = res.data;
						console.log(that.isFriend);
					}
				})
			},
			
			// 跳转编辑页面（有编辑权限）
			async goEditNote(noteId, query){
				if(this.noteDetail.modify_scope === 'public'){
					
				}
				else if(this.noteDetail.modify_scope === 'self'){
					if(this.user.id !== this.noteDetail.user_id){
						uni.showToast({
							icon: 'error',
							title: '无权限'
						})
						return
					}
				}
				else {
					await this.checkIsFriend()
					if(this.ischeckfriend === true){
						if(this.isFriend === false){
							console.log(this.isFriend)
							uni.showToast({
								icon: 'error',
								title: '无权限'
							});
							return;
						}
					} else {
						return;
					}
				}
				
				let upath = wx.env.USER_DATA_PATH;
				let draftpath = upath + "/draft";
				let that = this;
				
				uni.getFileSystemManager().saveFile({
					tempFilePath: this.noteName,
					filePath: draftpath + "/" + this.fileName + '.note',
					success(res){
						console.log(res)
					}
				})
				
				if(this.noteDetail.type === 1){
					uni.navigateTo({
						url:'/pages/editNote/editNote?FileName=' + draftpath + "/" + query + '.note'
					})
				}
				else if(this.noteDetail.type === 2){
					uni.navigateTo({
						url:'/pages/SWOT/SWOT?FileName=' + draftpath + "/" + query + '.note'
					})
				}
				else if(this.noteDetail.type === 3){
					uni.navigateTo({
						url:'/pages/5W1H/5W1H?FileName=' + draftpath + "/" + query + '.note'
					})
				}
				else if(this.noteDetail.type === 4){
					uni.navigateTo({
						url:'/pages/timeManageFour/timeManageFour?FileName=' + draftpath + "/" + query + '.note'
					})
				}
			},
			
			goHistoryView(query){
				uni.navigateTo({
					url:'/pages/history/history?noteId=' + query
				})
			},
			
			addToDirectoryEntry(){
				this.directoryPage = 0;
				this.addToDirectory();
			},
			
			//添加到收藏夹
			addToDirectory(){
				let that = this;
				let directoryListLength = this.directory.length;
				
				let tmp = [];
				this.directory.forEach(element => {
					tmp.push(element.directory_name)
				})
				let directoryName = tmp.slice(this.directoryPage, this.directoryPage + 5);
				if(directoryName.length === 5){
					directoryName.push('下一页')
					uni.showActionSheet({
						itemList: directoryName,
						success: (res) => {
							if( res.tapIndex < 5) {
								that.addToSelectedDirectory(res.tapIndex + that.directoryPage);
							} else {
								that.directoryPage += 5;
								that.addToDirectory();
							}
							
						},
					})
				}
				else{
					directoryName.push('新建文件夹')
					uni.showActionSheet({
						itemList: directoryName,
						success: (res) => {
							if( res.tapIndex < directoryListLength - that.directoryPage) {
								that.addToSelectedDirectory(res.tapIndex + that.directoryPage);
							} else {
								that.createNewDirectory();
							}
						}
					})
				}
			},
			
			//添加到选中的收藏夹
			addToSelectedDirectory(index){
				let form0 = {
					//"directory_name": this.InputValue,
					"user_id" : this.user.id,
					"note_id" : this.noteId,
					"directory_group" : this.directory[index].directory_id
					
				}
				console.log(this.directory[index].directory_id)
				
				let form = JSON.parse(JSON.stringify(form0));
				
				
				uni.request({
					url:config.baseUrl+'/directory/insert',
					data: form,
					method:'POST',
					success(res) {
						if(res.statusCode === 200){
							uni.showToast({
								icon:'success',
								title:'添加成功',
								duration: 800
							})
						}
						else{
							uni.showToast({
								icon:'error',
								title:'已存在该笔记',
								duration: 800
							})
						}
				
					}	
				})

			},
			
			createNewDirectory(){
				let that = this;
				uni.showModal({
				    title: '添加收藏夹',
					placeholderText:'收藏夹名称',
					content:'',
				    editable: true,
				    success: (res) => {
				        if (res.confirm) {
				            const newDirectoryName = res.content;
				            if (newDirectoryName !== '') {
								//
								let form0 = {
									"directory_name": newDirectoryName,
									"user_id": that.user.id,
								}
								console.log('form0')
								console.log(form0)
								let form = JSON.parse(JSON.stringify(form0));
																
								uni.request({
									url: config.baseUrl + '/directoryitem/Insert',
									method:'POST',
									data:form,
									success(res){
										uni.request({
											url: config.baseUrl + '/directoryitem/selectByDirectoryName?directoryName='+newDirectoryName,
											method:'GET',
											data:form,
											
											success(res){
												console.log(res.data.directory_id);
												that.directory.push({
													directory_id: res.data.directory_id,
													directory_name: newDirectoryName,
													user_id: that.user.id
												});
												console.log('+++++++++++++++++++++++++')
												console.log(that.directory);
												that.addToDirectory();
											}
										})
									}
								})
								
					
				            } else {
								console.log('名称不能为空');
								uni.showToast({
									icon:'error',
									title:'名称不能为空',
									duration: 800
								})
				            }
				        }
				    }
				});
			},
			
			//评论点赞的处理
			like(index){
				let that = this;
				if( !(this.isLike.includes(index)) ) {
					//点赞
					this.isLike.push(index);
					uni.request({
						url: config.baseUrl + '/comment/upvote?commId=' + this.comment[index].comm_id,
						method: 'POST',
						success(res){
							that.comment[index].like_num += 1;
						},
						fail(res){
							console.log(res);
						}
					})
				} else {
					//取消点赞
					for (let i = this.isLike.length - 1; i >= 0; i--) {
					    if (this.isLike[i] === index) {
					        this.isLike.splice(i, 1);
							uni.request({
								url: config.baseUrl + '/comment/cancelUpvote?commId=' + this.comment[index].comm_id,
								method: 'POST',
								success(res){
									that.comment[index].like_num -= 1;
								},
								fail(res){
									console.log(res);
								}
							})
					    }
					}
					
					//数据库点赞数 -1
				}
			},
			
			//ai摘要
			AIAssistAsk(){
				let that = this;
				uni.request({
					url: 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-lite-8k?access_token=' + this.tokenai,
					data: {
						"messages": [
						    {
						        role: "user",
						        content: "请分析以下这段文字的摘要和关键词，忽略其中的html标签：" + this.noteContent + this.noteContentArr,
						    }
						],
					},
					method:'POST',
					headers: {
						'Content-Type': 'application/json',
					}, 
					success(res) {
						that.genSummary = res.data.result;
						console.log(res);
						console.log(that.noteContent + that.noteContentArr);
					}
				})
				
				that.AIAssistInput = '';
			},
			
			getTokenAI(){
			  let that=this;
			  let ApiKey='vuUXqkEFYCVUOkA1mvEGXD60';//你自己的apikey
			  let SecretKey='eMFEOC8PUwVyfP71qgp1gTmMEdItGQag';//你自己的SecretKey
			  const url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id='+ApiKey+'&client_secret='+SecretKey
			  uni.request({
			      url:url,
			      method: 'POST',
			      success(res){
			        console.log("创建AIaccess_token成功",res)
						//将access_token存储到storage中
						that.tokenai = res.data.access_token;
					},
			  });
			},
			
			onTagClick(query){
				uni.switchTab({
					url:'/pages/find/find'
				})
			},
			
			goProfile(index){
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + index
				})
			}
		}
	}
</script>

<style scoped>
	.backBox{
		display: flex;
		width: 100%;
	}
	
	.vertical-line {
		position: absolute;
		
		right: 50%;
		left: 50%;
		top: 20%;
		
		height: 26%;
		width: 2px;
		background-color: black;
		
	}
	
	.horizontal-line {
		position: absolute;
		margin-left: 5%;
		
		top:33%;
		left: 20%;  
		right: 50%;
	  
		height: 2px;
		width: 50%;
		background-color: black;
	
	}
	
	.viewBack{
		border-radius: 10px;
		cursor: pointer;
		font-size: 16px;
	}
	
	/* ------------------------------------------------------------ */
	
	
	.Box{
		width: 90%;
		margin-top: 2%;
		margin-left: 3.5%;
	}
	
	.TextBox{
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		margin-bottom: 20px;
	}
	
	.title{
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	.userName{
		color: grey;
		margin-bottom: 5%;
	}
	
	.ql-editor{
		font-size: 17px;
	}
	
	.container-wrapper {
		display: flex;
		box-sizing: border-box;
		height: 600rpx;
		background: #fff;
		flex-wrap: wrap;
	}
	
	.ql-container {
		min-height: 0% !important;
		min-width: 0% !important;
		overflow-y: hidden;
		width: 0%;
		height: 0%;
		transition: 300ms;
		word-break: break-all;
		opacity: 0;
	}
	
	.ql-container.active{
		overflow-y: auto;
		height: 80%;
		width: 100%;
		opacity: 1;
		line-height: 1.5;
	}
	
	.ql-container.inactive{
		padding: 0px 0px;
		margin-top: 0px;
		min-height: 0% !important;
		min-width: 0% !important;
		overflow-y: hidden;
		width: 0%;
		height: 0%;
		opacity: 0;
	}
	
	.operateBox {
		display: flex;
		background-color: #fff;
		padding: 50rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 5%;
	}
	
	.operate-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  width: 33%;
	}
	
	.funcLabel {
	  margin-top: 5px;
	  font-size: 14px;
	  color: #666666;
	}
	
	.commentBox{
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		
		overflow: hidden;
		height: 30px;
	}
	
	.commentBox.active{
		overflow: auto;
		height: 100%;
	}
	
	.control{
		margin-bottom: 10%;
		display: flex;
		width: 100%;
	}
	
	.comment{
		display: flex;
		margin-bottom: 15px;
		width: 100%;
	}
	
	.head-image{
		width: 20%;
		height: 70%;
		border-radius: 50%;
		margin-right: 4px;
		margin-top: 1.5%;
		margin-left: 2px;
		margin-bottom: 2%;
		
		max-height: 45px;
		max-width: 45px;
	}
	
	.column{
		background-color: #f7f7f7;
		padding: 10px;
		border-radius: 5px;
		width: 60%;
		margin-left: 5%;
		margin-bottom: 1%;
		flex: 1;
	}
	
	.commentUserName{
		font-size: 13px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	.commentContent{
		font-size: 16px;
		word-break: break-all;
	}
	
	.likeBox{
		display: flex;
		flex-direction: column;
	}
	
	.likeImg{
		width: 40px;
		height: 40px;
		background-image: url('/static/tab-Icons/notelike.png');
		background-size: 40px 40px;
	}
	
	.likeImg.likeActive{
		width: 40px;
		height: 40px;
		background-image: url('/static/tab-Icons/likeSelected.png');
		background-size: 40px 40px;
	}
	
	.likeNumText{
		align-self: center;
	}

	.rich-text {
	  line-height: 20px;
	}
	
	.tagbox{
		display: flex;
		flex-wrap: wrap;
		margin-top: 3%;
		margin-bottom: 3%;
	}
	
	.tag-item{
		padding: 10px;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		border-radius: 20rpx;
	}
	
	.writeCommentBox{
		padding: 10px;
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		
		cursor: pointer;
		border-radius: 20rpx;
		width: 90%;
	}
</style>
